<template>
	<div class="side-left-right">
		<div class="item-plane">
			<div class="item_2">
				<div class="box-parent">
					<div class="head">
						<span class="title">门禁设备统计</span>
					</div>
					<div class="box">
						<div class="box1">
							<div class="box1-2">
								<span class="value">40
									<span class="unit">个</span>
								</span>
								<span class="title">总数</span>
							</div>
						</div>
						<div class="box1">
							<div class="box1-2">
								<span class="value2">10
									<span class="unit">个</span>
								</span>
								<span class="title">在线</span>
							</div>
						</div>
						<div class="box1">
							<div class="box1-2">
								<span class="value3">10
									<span class="unit">个</span>
								</span>
								<span class="title">离线</span>
							</div>
						</div>
						<div class="box2">
							<span class="title">设备占比</span>
							<piechartKj3D class="chartsGl" :datalist="pieData" width="260px" height="105px">
							</piechartKj3D>
							<div class="box2-2">
								<div class="box2-2-1">
									<span class="title2">在线</span>
									<span class="title3">90</span>
									<span class="title4">70%</span>
								</div>
								<div class="box2-2-2">
									<span class="title2">离线</span>
									<span class="title3">10</span>
									<span class="title4">10%</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="item_4">
				<div class="box-parent">
					<div class="head">
						<span class="title">门禁列表</span>
					</div>
					<div class="box">
						<div class="m-list">
							<div class="boxinfo">
								<s-list ref="reflst1" :itemStl="itemStl" :headStl="headStl" :head="dtjHead"
									:rows="dtjDts" :has-search="false"></s-list>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 中间弹窗 -->
	<transition name="animate__animated animate__bounce" enter-active-class="animate__zoomIn"
		leave-active-class="animate__zoomOut">
		<div v-if="goDetailList" class="messageBox">
			<span class="ktText">门禁-417室</span>
			<span class="ktBtn pbtn" @click="btnclose"></span>
			<div class="door_list">
				<div class="m-list">
					<div class="boxinfo">
						<s-list ref="reflst1" :itemStl="itemStl2" :headStl="headStl2" :head="dtjHead2" :rows="dtjDts2"
							:has-search="false"></s-list>
					</div>
				</div>
			</div>
		</div>
	</transition>
	<transition name="animate__animated animate__bounce" enter-active-class="animate__zoomIn"
		leave-active-class="animate__zoomOut">
		<div v-if="goDetail" class="messageBox2">
			<span class="ktText">门禁-417室</span>
			<span class="ktBtn pbtn" @click="btnclose2"></span>
			<div class="door_list">
				<div class="box-1">
					<div class="logo1"></div>
					<span class="title">门状态：</span>
					<span class="value">常开</span>
					<span class="value2">关闭</span>
				</div>
				<div class="box-1">
					<div class="logo1"></div>
					<span class="title">在线状态：</span>
					<span class="value3">在线</span>
					<span class="value4">离线</span>
					<span class="value5">故障</span>
				</div>
				<div class="box-2"></div>
				<div class="box-3">
					<div class="btn1">远程开门</div>
					<div class="btn2">通行记录</div>
				</div>
			</div>
		</div>
	</transition>

</template>
<script setup>
import sList from "cmpt/table.vue";
import vChart from "mChart/chart.vue";
import apis from '@/api/indexapi.js';
import * as echarts from 'echarts';
import piechartKj3D from "../../components/chart/chartPie.vue";
const searchBarStyle = "margin: 0 auto;margin-top: 10px;width:100%;height:32px";
//请求的实例
const _api = apis();
// 饼图容器的引用
const pieChart = ref(null);
const btnclose = () => {
	goDetailList.value = false;
}
const btnclose2 = () => {
	goDetail.value = false;
}
//弹窗控制
const goDetailList = ref(true);
const goDetail = ref(true);

const datState1 = ref({})
import { ref, watch, onMounted } from 'vue';
const pieData = ref([
  { name: "在线", value: 16 ,itemStyle: { color: '#49A5F7' }},
  { name: "离线", value: 12,itemStyle: { color: '#F87352' }},
]);
//表头样式
const headStl2 = "width: 100%;height: 30px;background: #4f9df4;border-radius: 6px;"
//表格样式
const itemStl2 = "border-radius: 6px;font-size:14px;width: 100%;height: 30px;margin-top: 4px;background: rgb(219, 229, 244);opacity: 0.75;"
//表头2数据
const dtjHead2 = ref([]);
//表格2数据
const dtjDts2 = ref([]);
//初始化表头2数据
dtjHead2.value = [
	listHead("name", "名称", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
	listHead("time", "时间", '150px', null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
	listHead("dept", "部门", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
	listHead("state", "进/出", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
];
dtjDts2.value = [{
	name: "张三",
	time: "设为常开",
	dept: "XX部门",
	state: "<span style='color: green'>进</span>"
}, {
	name: "张三",
	time: "设为常开",
	dept: "XX部门",
	state: "<span style='color: green'>进</span>"
}
	, {
	name: "张三",
	time: "设为常开",
	dept: "XX部门",
	state: "<span style='color: green'>进</span>"
}
	, {
	name: "张三",
	time: "设为常开",
	dept: "XX部门",
	state: "<span style='color: green'>进</span>"
}, {
	name: "张三",
	time: "设为常开",
	dept: "XX部门",
	state: "<span style='color: green'>进</span>"
}, {
	name: "张三",
	time: "设为常开",
	dept: "XX部门",
	state: "<span style='color: green'>进</span>"
}
]
//当前选中
const currentTab = ref('monitorList');
const changeTab = (tabName) => {
	currentTab.value = tabName;
	fetchData(); // 请求新数据
}
//外层绑定@onFn="hOnFn"
const emit = defineEmits(['call']);
//触发
const hOnFn = (t) => {
  emit('call', t);
}
const fetchData = () => {
	// 根据currentTab获取对应数据
	if (currentTab.value === 'monitorList') {
		dtjHead.value = [
			listHead("name", "名称", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
			listHead("num", "编号", '150px', null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
			listHead("state", "状态", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
			listHead("controller", "操作", null, null, (item) => {
				hOnFn("hToFlo", item.id)
			}, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
		];
		// 请求监控列表数据的API
		dtjDts.value = [
			{
				id: 123,
				name: "监控1",
				num: "r3465477",
				state: "在线",
				controller: "<button id='1'>定位</button><button id='2'>控制</button>"
			},
			{
				id: 123,
				name: "监控1",
				num: "r3465477",
				state: "在线",
				controller: "<button id='1'>定位</button><button id='2'>控制</button>"
			},
			{
				id: 123,
				name: "监控1",
				num: "r3465477",
				state: "在线",
				controller: "<button id='1'>定位</button><button id='2'>控制</button>"
			},
			{
				id: 123,
				name: "监控1",
				num: "r3465477",
				state: "在线",
				controller: "<button id='1'>定位</button><button id='2'>控制</button>"
			},
			{
				id: 123,
				name: "监控1",
				num: "r3465477",
				state: "离线",
				controller: "<button id='1'>定位</button><button id='2'>控制</button>"
			},
			{
				id: 123,
				name: "监控1",
				num: "r3465477",
				state: "在线",
				controller: "<button id='1'>定位</button><button id='2'>控制</button>"
			},
			{
				id: 123,
				name: "监控1",
				num: "r3465477",
				state: "离线",
				controller: "<button id='1'>定位</button><button id='2'>控制</button>"
			},
		]
	} else {
		dtjHead.value = [
			listHead("name", "组名", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
			listHead("num", "监控数量", '150px', null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
			listHead("remark", "备注", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
		];
		// 请求监控组数据的API
		dtjDts.value = [
			{
				name: "监控组1",
				num: "6",
				remark: "XXX"
			},
			{
				name: "监控组1",
				num: "6",
				remark: "XXX"
			},
			{
				name: "监控组1",
				num: "6",
				remark: "XXX"
			},
			{
				name: "监控组1",
				num: "6",
				remark: "XXX"
			},
			{
				name: "监控组1",
				num: "6",
				remark: "XXX"
			},
			{
				name: "监控组1",
				num: "6",
				remark: "XXX"
			},
		]
	}
}
function listHead(k, v, w, icon, ev, s, color) {
	return {
		k,
		v,
		w,
		icon: icon || null,
		click: ev || null,
		sort: s,
		color: color || null
	};
}
const dtjHead = ref([]);
const dtjDts = ref([]);
//表头样式
const headStl = "width: 100%;height: 30px;background: #4f9df4;border-radius: 6px;"
//表格样式
const itemStl = "border-radius: 6px;font-size:14px;width: 100%;height: 30px;margin-top: 4px;background: rgb(219, 229, 244);opacity: 0.75;"
dtjHead.value = [
	listHead("name", "名称", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
	listHead("num", "编号", '150px', null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
	listHead("state", "状态", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
	listHead("controller", "操作", null, null, (item) => {
		hOnFn("hToFlo", item.id)
	}, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
];

dtjDts.value = [
	{
		id: 123,
		name: "监控1",
		num: "r3465477",
		state: "在线",
		controller: "<button id='1'>定位</button><button id='2'>控制</button>"
	},
	{
		id: 123,
		name: "监控1",
		num: "r3465477",
		state: "在线",
		controller: "<button id='1'>定位</button><button id='2'>控制</button>"
	},
	{
		id: 123,
		name: "监控1",
		num: "r3465477",
		state: "在线",
		controller: "<button id='1'>定位</button><button id='2'>控制</button>"
	},
	{
		id: 123,
		name: "监控1",
		num: "r3465477",
		state: "在线",
		controller: "<button id='1'>定位</button><button id='2'>控制</button>"
	},
	{
		id: 123,
		name: "监控1",
		num: "r3465477",
		state: "离线",
		controller: "<button id='1'>定位</button><button id='2'>控制</button>"
	},
	{
		id: 123,
		name: "监控1",
		num: "r3465477",
		state: "在线",
		controller: "<button id='1'>定位</button><button id='2'>控制</button>"
	},
	{
		id: 123,
		name: "监控1",
		num: "r3465477",
		state: "离线",
		controller: "<button id='1'>定位</button><button id='2'>控制</button>"
	},
]
onMounted(() => {
});
watch(dtjDts, (newVal) => {
	console.log('dtjDts updated:', newVal);
});
</script>

<style scoped lang="scss">
.messageBox {
	position: absolute;
	left: 670px;
	top: 200px;
	width: 500px;
	height: 293px;
	background-image: url(/imgs/AirConditioner/boxBg2.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	justify-content: center;

	.ktText {
		position: absolute;
		top: 15px;
		left: 200px;
		font-family: FZCuYuan-M03S;
		font-weight: 400;
		font-size: 18px;
		color: #fefefe;
	}

	.ktBtn {
		position: absolute;
		top: 11px;
		right: 21px;
		width: 20px;
		height: 16px;
		background-image: url(/imgs/AirConditioner/hid_icon.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}


	.door_list {
		width: 470px;
		height: 210px;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
		position: absolute;
		top: 60px;
		// left: 34px;

		.m-list {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			height: 100%;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;

			.boxinfo {
				width: 100%;
			}
		}
	}
}

.messageBox2 {
	position: absolute;
	left: 70px;
	top: 200px;
	width: 500px;
	height: 200px;
	background-image: url(/imgs/AirConditioner/boxBg2.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	justify-content: center;

	.ktText {
		position: absolute;
		top: 4px;
		left: 200px;
		font-family: FZCuYuan-M03S;
		font-weight: 400;
		font-size: 18px;
		color: #fefefe;
	}

	.ktBtn {
		position: absolute;
		top: 11px;
		right: 21px;
		width: 20px;
		height: 16px;
		background-image: url(/imgs/AirConditioner/hid_icon.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}


	.door_list {
		// width: 470px;
		height: 210px;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
		position: absolute;
		top: 60px;
		// left: 34px;
		flex-direction: column;

		.box-3 {
			margin-top: 10px;
			display: flex;
			width: 400px;
			justify-content: space-around;
			align-items: center;

			.btn1 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 115px;
				height: 32px;
				background-image: url("/imgs/jk/矩形 535 拷贝 12(3).png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-position: center;
			}

			.btn2 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 115px;
				height: 32px;
				background-image: url("/imgs/jk/矩形 535 拷贝 12(3).png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-position: center;
			}
		}

		.box-2 {
			margin-top: 10px;
			width: 425px;
			height: 2px;
			background-image: url("/imgs/jk/形状 14.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
		}

		.box-1 {

			.logo1 {
				left: 23px;
				top: 19px;
				position: relative;
				width: 5px;
				height: 5px;
				background: #5984CE;
				border-radius: 50%;
			}

			.title {
				margin-left: 30px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 18px;
				color: #2A2E3E;
				line-height: 31px;
				font-style: italic;
			}

			.value {
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 18px;
				color: #1FBA38;
				line-height: 31px;
			}

			.value2 {
				margin-left: 10px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 18px;
				color: #FF6060;
				line-height: 31px;
			}

			.value3 {

				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 18px;
				color: #218CFF;
				line-height: 31px;
			}

			.value4 {
				margin-left: 10px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 18px;
				color: #F1774D;
				line-height: 31px;
			}

			.value5 {
				margin-left: 10px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 18px;
				color: #DA61AB;
				line-height: 31px;
			}
		}

		.m-list {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			height: 100%;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;

			.boxinfo {
				width: 100%;
			}
		}

	}

}

.side-left-right {
	padding: 0;
}

.item-plane {
	display: flex;
	justify-content: space-between;
	padding: 0px 0px 0px 0px !important;
	height: calc(100% - 40px) !important;
	margin-bottom: 40px;
}

.item_2 {
	height: 20%;

	.box-parent {
		padding: 0 25px 0 25px;
		margin-top: 40px;
		// display: flex;
		flex-direction: row;
		height: 265px;
		background-image: url('/imgs/jk/矩形 1.png');
		background-position: left;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.head {
			display: flex;
			height: 45px;
			position: relative;
			top: -26px;
			background-image: url("/imgs/nindex/title.png");
			background-position: left;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.title {
				margin-top: 5px;
				margin-left: 80px;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 27px;
				color: #FFFFFF;

			}
		}

		.box {
			top: -14px;
			display: flex;
			flex-wrap: wrap;
			position: relative;
			justify-content: center;
			align-items: center;
			gap: 5px;

			.box2 {
				width: 100%;
				margin-top: 0px;
				height: 120px;
				display: flex;
				background-image: url("/imgs/nindex/组 1728.png");
				background-position: left;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				align-items: center;

				.chartsGl {
					height: 105px;
					width: 210px !important;
				}

				.title {
					top: 95px;
					left: 51px;
					position: absolute;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 17px;
					color: #FFFFFF;
					opacity: 0.8;
				}

				.box2-2 {
					margin-top: 60px;
					display: flex;
					width: 100px;
					height: 100px;
					flex-wrap: wrap;
					flex-direction: column;

					.box2-2-1 {
						display: flex;
						width: 500px;
						margin-top: 10px;
						background-image: url("/imgs/nindex/组 1722.png");
						background-position: left;
						background-repeat: no-repeat;

						.title2 {
							margin-left: 30px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 15px;
							color: #2A2E3E;
							line-height: 20px;
						}

						.title3 {
							margin-left: 44px;
							font-family: DIN1451EF EngNeu;
							font-weight: 400;
							font-size: 30px;
							color: #58AFF6;
							line-height: 20px;
						}

						.title4 {
							margin-left: 24px;
							font-family: DIN1451EF EngNeu;
							font-weight: 400;
							font-size: 30px;
							color: #58AFF6;
							line-height: 20px;
						}
					}

					.box2-2-2 {
						display: flex;
						width: 500px;
						margin-top: 10px;
						background-image: url("/imgs/nindex/组 1722 拷贝.png");
						background-position: left;
						background-repeat: no-repeat;

						.title2 {
							margin-left: 30px;
							height: 14px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 15px;
							color: #2A2E3E;
							line-height: 20px;
						}

						.title3 {
							margin-left: 44px;
							font-family: DIN1451EF EngNeu;
							font-weight: 400;
							font-size: 30px;
							color: #FF8961;
							line-height: 20px;
						}

						.title4 {
							margin-left: 24px;
							font-family: DIN1451EF EngNeu;
							font-weight: 400;
							font-size: 30px;
							color: #FF8961;
							line-height: 20px;
						}
					}

				}
			}

			.box1 {
				width: 150px;
				height: 90px;
				display: flex;
				background-image: url("/imgs/jk/矩形 686(1).png");
				background-position: left;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				// justify-content: space-between;
				align-items: center;

				.box1-2 {
					margin-left: 30px;
					display: flex;
					flex-direction: column;
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.title {
						font-family: Adobe Heiti Std;
						font-weight: normal;
						font-size: 15px;
						color: #2A2E3E;
						line-height: 23px;
						opacity: 0.8;
					}

					.value {
						height: 29px;
						font-family: DIN1451EF EngNeu;
						font-weight: 400;
						font-size: 37px;
						color: #FFA200;
						line-height: 25px;

						.unit {
							width: 12px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 13px;
							color: #2A2E3E;
							line-height: 23px;
							opacity: 0.5;
						}
					}

					.value2 {
						height: 29px;
						font-family: DIN1451EF EngNeu;
						font-weight: 400;
						font-size: 37px;
						color: #218CFF;
						line-height: 25px;

						.unit {
							width: 12px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 13px;
							color: #2A2E3E;
							line-height: 23px;
							opacity: 0.5;
						}
					}

					.value3 {
						height: 29px;
						font-family: DIN1451EF EngNeu;
						font-weight: 400;
						font-size: 37px;
						color: #F1774D;
						line-height: 25px;

						.unit {
							width: 12px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 13px;
							color: #2A2E3E;
							line-height: 23px;
							opacity: 0.5;
						}
					}

					.value4 {
						height: 29px;
						font-family: DIN1451EF EngNeu;
						font-weight: 400;
						font-size: 37px;
						color: #DA61AB;
						line-height: 25px;

						.unit {
							width: 12px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 13px;
							color: #2A2E3E;
							line-height: 23px;
							opacity: 0.5;
						}
					}

				}
			}
		}
	}
}


.item_4 {
	height: 70%;

	.box-parent {
		padding: 0 25px 0 25px;
		margin-top: 28px;
		flex-direction: row;
		height: 630px;
		background-image: url('/imgs/jk/矩形 1.png');
		background-position: left;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.head {
			display: flex;
			height: 45px;
			position: relative;
			top: -26px;
			background-image: url("/imgs/nindex/title.png");
			background-position: left;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.title {
				margin-top: 5px;
				margin-left: 80px;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 27px;
				color: #FFFFFF;

			}
		}

		.box {
			top: -14px;
			position: relative;
			height: 374px;

			.btnList {
				position: relative;
				display: flex;
				flex-direction: row;
				top: -238px;
				right: 68px;
				float: right;

				.btn1 {
					margin-left: 5px;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 90px;
					height: 30px;
					background-image: url("/imgs/jk/矩形 535 拷贝 12(2).png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.title {
						font-family: Adobe Heiti Std;
						font-weight: normal;
						font-size: 17px;
						color: #2A2E3E;
						line-height: 23px;
						opacity: 0.8;
					}
				}

				/* 激活状态样式 */
				.btn1.active {
					background-image: url("/imgs/jk/矩形 535 拷贝 12(1).png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.title {
						font-family: Adobe Heiti Std;
						font-weight: normal;
						font-size: 17px;
						color: #FFFFFF;
						line-height: 23px;
						opacity: 0.8;
					}
				}
			}

			.m-list {
				display: flex;
				flex-wrap: wrap;
				height: 90%;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-position: center;

				.boxinfo {
					width: 100%;
				}
			}
		}
	}
}
</style>